<!-- 组织结构 -->
<template>
	<div class="wx-user-box left-item">
		<div class="wx-user-title flex-space-between">
			<span>组织结构</span>
			<el-tooltip class="tooltip" effect="dark" content="刷新" placement="top"><i class="el-icon-refresh" @click="refresh" /></el-tooltip>
		</div>
		<div class="tree-container">
			<el-input v-model="filterText" clearable placeholder="请输入关键字进行过滤" style="width:100%" />
			<div class="custom-tree-container">
				<el-tree
					ref="tree"
					:data="orgList"
					:props="defaultProps"
					node-key="org_id"
					:filter-node-method="filterNode"
					highlight-current
					:expand-on-click-node="false"
					:default-expanded-keys="idArr"
					@node-click="treeClick"
				>
					<div slot-scope="{ node, data }" class="custom-tree-node">
						<span>{{ node.label }} ({{ data.num }})</span>
					</div>
				</el-tree>
			</div>
		</div>
	</div>
</template>

<script>
import {
	getOrgTree,
	getOrgTreePersonneNum,
	addOrUpdate,
	orgDelete,
	userPageList,
	getGroupData,
	userDelete,
	batchUserDelete,
	cardQueryPageList,
	getCardDetail,
	reportLossreportLoss,
	contactReportLoss,
	logoutCard,
	changeCard,
	supplementCard,
	retreatCard
} from '@/api/personnel-manage';
export default {
	props: {},
	data() {
		return {
			filterText: '',
			orgList: [], // 组织树数据
			orgData: '',
			defaultProps: {
				// tree配置选项
				children: 'children',
				label: 'org_name'
			},
			idArr: []
		};
	},
	watch: {
		filterText(val) {
			this.$refs.tree.filter(val);
		}
	},
	mounted() {
		this.getOrgTree();
		this.getGroupData(false);
	},
	methods: {
		// tree节点点击
		treeClick(data) {
			// console.log(data)
			this.$parent.formInline.orgId = data.org_id;
			this.$parent.getData();
		},

		// 刷新
		refresh() {
			this.$parent.formInline.orgId = '';
			this.getOrgTree();
			this.$parent.getData();
		},
		// 过滤
		filterNode(value, data) {
			if (!value) return true;
			return data.org_name.indexOf(value) !== -1;
		},
		// 获取组织数结构
		getOrgTree() {
			getOrgTree().then(res => {
				if (res.state) {
					this.orgList = res.data;
					res.data.forEach(m => {
						this.idArr.push(m.org_id);
					});
					this.getOrgTreePersonneNum();
				}
			});
		},
		// 获取组织数结构带数字
		getOrgTreePersonneNum() {
			getOrgTreePersonneNum().then(res => {
				if (res.state) {
					this.orgList = res.data;
					res.data.forEach(m => {
						this.idArr.push(m.org_id);
					});
				}
			});
		},
		// 获取分组列表
		getGroupData(is = true) {
			getGroupData({}, is).then(res => {
				if (res.state) {
					this.groupList = res.data;
				}
			});
		}
	}
};
</script>

<style scoped lang="scss">
.left-item {
	width: 250px;
	margin-right: 10px;
	flex-shrink: 0;

	>>> .el-tree > .el-tree-node {
		min-width: 100%;
		display: inline-block;
	}
}

.tree-container {
	padding: 20px;
	height: 92%;
	overflow: auto;

	.custom-tree-container {
		padding-top: 15px;
		overflow: auto;

		.custom-tree-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 14px;
			padding-right: 8px;

			i:first-child {
				color: #409eff;
				margin-right: 2px;
			}

			i:last-child {
				color: #f56c6c;
			}
		}
	}
}
</style>
